import React, { PureComponent } from 'react'
import { connect } from 'dva';
import moment from 'moment';
import { Input, Select, DatePicker, Button, Table } from 'antd'
import styles from './dataControl.less'
const { Option } = Select
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD'
function arrayUnique2(arr, name) {
  var hash = {};
  return arr.reduce(function (item, next) {
    hash[next[name]] ? '' : hash[next[name]] = true && item.push(next);
    return item;
  }, []);
}
let lastArr = []
var nowdate = new Date();
var y = nowdate.getFullYear();
var m = nowdate.getMonth()+1;
var d = nowdate.getDate();
var formatnowdate = y+'-'+m+'-'+d;
var Now = formatnowdate //现在时间
//获取系统前一周的时间
var oneweekdate = new Date(nowdate-7*24*3600*1000);
var y = oneweekdate.getFullYear();
var m = oneweekdate.getMonth()+1;
var d = oneweekdate.getDate();
var formatwdate = y+'-'+m+'-'+d;
nowdate.setMonth(nowdate.getMonth()-1);
var y = nowdate.getFullYear();
var m = nowdate.getMonth()+1;
var d = nowdate.getDate();
var formatwdate = y+'-'+m+'-'+d;
var SevPast = formatwdate //前一个月的时间

let lastArrData = [
  {
    title: '订单号',
    dataIndex: 'expressNo',
    key: 'expressNo',
    align: 'center',
    
  },
  {
    title: '创建时间',
    dataIndex: 'gmtCreateShow',
    key: 'gmtCreateShow',
    align: 'center',

  },
  {
    title: '会员账号',
    dataIndex: 'senderCustomerNo',
    key: 'senderCustomerNo',
    align: 'center',

  },
  {
    title: '订单状态',
    dataIndex: 'orderStateShow',
    key: 'orderStateShow',
    align: 'center',

  },
  {
    title: '物流状态',
    dataIndex: 'stateShow',
    key: 'stateShow',
    align: 'center',

  },
  {
    title: '目的港',
    dataIndex: 'destShow',
    key: 'destShow',
    align: 'center',
  },
  {
    title: '收运->付款(h)',
    dataIndex: '',
    key: '10',
    align: 'center',
    render: (row) => {
      let color = 'rgba(0, 0, 0, 0.65)'
      if(row.receivedToPaymentTime.isRed){
        color = 'red'
      }else{
        color = 'rgba(0, 0, 0, 0.65)'
      }
      return (
        <span style={{color: color}}>{row.receivedToPaymentTime.timeliness}</span>
      )
    },
  }
]
let columnsData = [
  {
    title: '订单号',
    dataIndex: 'expressNo',
    key: 'expressNo',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'gmtCreateShow',
    key: 'gmtCreateShow',
    align: 'center',

  },
  {
    title: '会员号',
    dataIndex: 'senderCustomerNo',
    key: 'senderCustomerNo',
    align: 'center',

  },
  {
    title: '订单状态',
    dataIndex: 'orderStateShow',
    key: 'orderStateShow',
    align: 'center',

  },
  {
    title: '物流状态',
    dataIndex: 'stateShow',
    key: 'stateShow',
    align: 'center',

  },
  {
    title: '目的港',
    dataIndex: 'destShow',
    key: 'destShow',
    align: 'center',
  },
  {
    title: '收运->付款(h)',
    dataIndex: '',
    key: '10',
    align: 'center',
    render: (row) => {
      let color = 'rgba(0, 0, 0, 0.65)'
      if(row.receivedToPaymentTime.isRed){
        color = 'red'
      }else{
        color = 'rgba(0, 0, 0, 0.65)'
      }
      return (
        <span style={{color: color}}>{row.receivedToPaymentTime.timeliness}</span>
      )
    },
  }
]
@connect(({ loading, example = {} }) => ({    //其中global={}表示global中的所有state
  commonList: example.commonData,
  dataList: example.timeData,
  totalCount: example.totalData,
  loading: loading.effects['example/getCommon'],   //这个statu使用models中的chart.js文件中的fetch方法异步获取
}))

export default class DataControl extends PureComponent {
    constructor(props) {
      super(props)
      this.personNum = React.createRef()
      this.oderNum = React.createRef()
    }
    state = {
      timeValue: [10],
    }
    params = {
      customerNo: '', 
      expressNo: '', 
      orderState: '', 
      destId: '',
      logisticsState: '', 
      timeSlot: '', 
      startDate: SevPast,
      endDate: Now,
      page: 1,
      pageSize: 10
    }
    componentDidMount(){
      this.setState({
        timeValue: [10]
      })
      const { timeValue } = this.state
      this.params.timeSlot = timeValue.join(' ')
      const { dispatch } = this.props
      dispatch({
        type: 'example/getCommon',
        payload: {}
      })
      dispatch({
        type: 'example/getTime',
        payload: this.params
      })
      
    }
    handleChangeOder = (data) => {
      this.params.page = data.current
      const { dispatch } = this.props
      dispatch({
        type: 'example/getTime',
        payload: this.params
      })
    }
    handleTime = (time) => {
      this.setState({ timeValue: time})
    }
    handleSelect = (data) => {
      console.log(data)
    }
    handleExport = () => {
      const { 
      customerNo, 
      expressNo, 
      orderState, 
      destId,
      logisticsState, 
      timeSlot, 
      startDate,
      endDate,
      page,
      pageSize} = this.params
    window.location.href=`/DataCompassMgr/doExportTimelinessPageData?startDate=${startDate}&endDate=${endDate}&customerNo=${customerNo}&expressNo=${expressNo}&
    orderState=${orderState}&destId=${destId}&logisticsState=${logisticsState}&timeSlot=${timeSlot}&page=${page}&pageSize=${pageSize}`
    }
    // 订单状态
    handleOder = (data) => {
      this.params.orderState = data
    }
    // 创建时间
    handleTimeNum = (value,dateString) => {
      this.params.startDate = dateString[0]
      this.params.endDate = dateString[1]

    }
    // 物流状态
    handleWu = (data) => {
      this.params.logisticsState = data
    }
    // 目的港
    handleMu = (data) => {
      this.params.destId = data
    }
    handleSearch = () => {
      const { dispatch } = this.props
      this.params.customerNo = this.personNum.current.input.value
      this.params.expressNo = this.oderNum.current.input.value
      const { timeValue, columns } = this.state
      this.params.timeSlot = timeValue.join(',')
      let arr = []
      const preArr = columnsData
      if(timeValue.length){
        for(let i = 0; i < timeValue.length; i++){
          if(timeValue[i] === 20){
            arr.push({
                title: '付款->打包(h)',
                dataIndex: '',
                key: '20',
                align: 'center',
                render: (row) => {
                  let color = 'rgba(0, 0, 0, 0.65)'
                  if(row.paymentToPackTime.isRed){
                    color = 'red'
                  }else{
                    color = 'rgba(0, 0, 0, 0.65)'
                  }
                  return (
                    <span style={{color: color}}>{row.paymentToPackTime.timeliness}</span>
                  )
                },
            })
          }else if(timeValue[i] === 30){
            arr.push({
              title: '打包->出库(h)',
              dataIndex: '',
              key: '30',
              align: 'center',
              render: (row) => {
                let color = 'rgba(0, 0, 0, 0.65)'
                if(row.packToStockoutTime.isRed){
                  color = 'red'
                }else{
                  color = 'rgba(0, 0, 0, 0.65)'
                }
                return (
                  <span style={{color: color}}>{row.packToStockoutTime.timeliness}</span>
                )
              },

            })
          }else if(timeValue[i] === 40){
            arr.push({
              title: '出库->起飞(h)',
              dataIndex: '',
              key: '40',
              align: 'center',
              render: (row) => {
                let color = 'rgba(0, 0, 0, 0.65)'
                if(row.stockoutToDepartureTime.isRed){
                  color = 'red'
                }else{
                  color = 'rgba(0, 0, 0, 0.65)'
                }
                return (
                  <span style={{color: color}}>{row.stockoutToDepartureTime.timeliness}</span>
                )
              },
            })
          }else if(timeValue[i] === 50){
            arr.push({
              title: '起飞->航班中转(h)',
              dataIndex: '',
              key: '50',
              align: 'center',
              render: (row) => {
                let color = 'rgba(0, 0, 0, 0.65)'
                if(row.departureToFlightTransferTime.isRed){
                  color = 'red'
                }else{
                  color = 'rgba(0, 0, 0, 0.65)'
                }
                return (
                  <span style={{color: color}}>{row.departureToFlightTransferTime.timeliness}</span>
                )
              },
            })
          }else if(timeValue[i] === 60){
            arr.push({
              title: '航班中转->航班到达(h)',
              dataIndex: '',
              key: '60',
              align: 'center',
              render: (row) => {
                let color = 'rgba(0, 0, 0, 0.65)'
                if(row.flightTransferToArrivalTime.isRed){
                  color = 'red'
                }else{
                  color = 'rgba(0, 0, 0, 0.65)'
                }
                return (
                  <span style={{color: color}}>{row.flightTransferToArrivalTime.timeliness}</span>
                )
              },
            })
          }else if(timeValue[i] === 70){
            arr.push({
              title: '航班到达->清关完成(h)',
              dataIndex: '',
              key: '70',
              align: 'center',
              render: (row) => {
                let color = 'rgba(0, 0, 0, 0.65)'
                if(row.flightArrivalToIccTime.isRed){
                  color = 'red'
                }else{
                  color = 'rgba(0, 0, 0, 0.65)'
                }
                return (
                  <span style={{color: color}}>{row.flightArrivalToIccTime.timeliness}</span>
                )
              },
            })
          }
        }
      }
      lastArrData = columnsData.concat(arr)
      console.log(lastArrData)
      dispatch({
        type: 'example/getTime',
        payload: this.params
      })

    }
   
   
    render(){
      const { commonList, dataList, totalCount } = this.props
      const { timeValue, columns } = this.state
      console.log(totalCount)
      const paginationOder = {
        total: totalCount,
        defaultCurrent:1,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSize: 10,
        pageSizeOptions: ['10'],
      }
        return(
            <div className={styles.dataControl}>
                <div className={styles.dataControlBox}>
                  <h2>物流时效监控</h2>
                  <div className={styles.dataControlSearch}>
                    <div className={styles.dataControlSin}>
                        <span className={styles.dataControlSpan}>客户号：</span>
                        <Input className={styles.dataControlInput}  ref={this.personNum}/>
                    </div>
                    <div className={styles.dataControlSin} style={{margin: '0 28px'}}>
                        <span className={styles.dataControlSpan}>订单号：</span>
                        <Input className={styles.dataControlInput} ref={this.oderNum}/>
                    </div>
                    <div className={styles.dataControlSin} style={{marginRight: '28px'}} >
                        <span className={styles.dataControlSpan}>订单状态：</span>
                        <Select className={styles.dataControlInput} onChange={this.handleOder}>
                            { commonList.orderStateOption &&  commonList.orderStateOption.map(item => (
                              <Option key={item.selectKey} value={item.selectKey}>{item.selectVal}</Option>
                            ))}
                        </Select>
                    </div>
                    <div className={styles.dataControlSin} >
                        <span className={styles.dataControlSpan}>创建时间：</span>
                        <RangePicker className={styles.dataControlInput}
                            format={dateFormat}
                            placeholder={['开始时间', '结束时间']}
                            onChange={this.handleTimeNum}
                            style={{width: '220px'}}
                            defaultValue={[moment(SevPast, dateFormat), moment(Now, dateFormat)]}
                        />
                    </div>
                  </div>
                  <div className={styles.dataControlSearch}>
                    <div className={styles.dataControlSin} >
                        <span className={styles.dataControlSpan}>物流状态：</span>
                        <Select className={styles.dataControlInput} onChange={this.handleWu}>
                            { commonList.logisticsStateOption &&  commonList.logisticsStateOption.map(item => (
                              <Option key={item.selectKey} value={item.selectKey}>{item.selectVal}</Option>
                            ))}
                        </Select>
                    </div>
                    <div className={styles.dataControlSin} style={{margin: '0 28px'}}>
                        <span className={styles.dataControlSpan}>目的港：</span>
                        <Select className={styles.dataControlInput} onChange={this.handleMu}>
                            { commonList.destOption && commonList.destOption.map(item => (
                              <Option key={item.selectKey} value={item.selectKey}>{item.selectVal}</Option>
                            ))}
                        </Select>
                    </div>
                    <div className={styles.dataControlSin} style={{marginRight: '28px'}}>
                        <span className={styles.dataControlSpan}>显示时段：</span>
                        <Select className={styles.dataControlInput} mode="multiple" onChange={this.handleTime} value={timeValue} allowClear onSelect={this.handleSelect}
                         style={{width: '230px'}}
                         maxTagCount={1}
                        >
                            { commonList.timeSlotOption && commonList.timeSlotOption.map(item => (
                              <Option key={item.selectKey} value={item.selectKey} className={styles.specialOption}>{item.selectVal}</Option>
                            ))}
                        </Select>
                    </div>
                    <div className={styles.dataControlSin}>
                       <Button type="primary" onClick={this.handleSearch}>查询</Button>
                       <Button type="primary" style={{marginLeft: '24px'}} onClick={this.handleExport}>导出</Button>
                    </div>
                  </div>
                  <div className={styles.dataControlTable}>
                    <Table dataSource={dataList} columns={lastArrData} rowKey={(record, key) => key} onChange={this.handleChangeOder} pagination={paginationOder}/>
                  </div>
                </div>
             </div>
        )
    }
}